Я пытаюсь настроить приложение bare-bones с помощью Angular 1 + Typcript 2 и Webpack. Приложение работает нормально, пока я не попытаюсь использовать внешний модуль, например: angular-ui-router.Как я могу получить webpack для поиска угловых модулей?

Он всегда жалуется, что не может найти зависимость:

ERROR in ./src/app.ts Module not found: Error: Cannot resolve module 'angular-ui-router' in ./src/app.ts 3:26-54

Демонстрационный показ проблемы: https://github.com/jxc876/angular-ts

Я подозреваю, что я не импортируя зависимость маршрутизации правильно, пробовал:

import uiRouter from 'angular-ui-router';
import * as uiRouter from 'angular-ui-router'

Пробовал с angular-route, а также ui-router, но ни работы. Пробовали ts-loader и awesome-typescript-loader.

App

import * as angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 

let myApp = angular.module('myApp', [uiRouter]); 

myApp.config(function($stateProvider) { 
    let homeState = { 
    name: 'home', 
    url: '/home', 
    template: '<div>It works !!!</div>' 
    } 

    $stateProvider.state(homeState); 
});

Config

package.json

{ 
    "name": "ts-demo", 
    "scripts": { 
    "start": "webpack-dev-server --content-base ./src" 
    }, 
    ... 
    "devDependencies": { 
    "@types/angular": "^1.5.16", 
    "@types/angular-ui-router": "^1.1.34", 
    "awesome-typescript-loader": "^3.0.0-beta.3", 
    "typescript": "^2.0.9", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2" 
    }, 
    "dependencies": { 
    "angular": "^1.5.8", 
    "angular-ui-router": "^0.3.1", 
    "enhanced-resolve": "^2.3.0" 
    } 
}

webpack.config.js

module.exports = { 
    entry: './src/app', 
    output: { 
    filename: './dist/bundle.js' 
    }, 
    resolve: { 
    extensions: ['.ts', '.tsx', '.js', '.jsx'] 
    }, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'awesome-typescript-loader' 
     } 
    ] 
    } 
};

tsconfig.json

{ 
    "compilerOptions": { 
     "outDir": "./dist/", 
     "allowJs": true, 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "strictNullChecks": true, 
     "listFiles": true 
    }, 
    "include": [ 
     "./src/**/*" 
    ], 
     "exclude": [ 
     "node_modules" 
    ] 
}

источник

2016-11-25 Mike R

родственный: http://stackoverflow.com/questions/34657652/webpack-with-typescript-external-commonjs-module/34658780 –

Наконец-то понял это.

Первая проблема заключается в том, что компилятор typescript удаляет операторы импорта, которые не используются.

Компилятор определяет, используется ли каждый модуль в испускаемом JavaScript. Если идентификатор модуля используется только в аннотациях типа и никогда не используется в качестве выражения, то для этого модуля не требуется вызов. Это отбраковка неиспользуемых ссылок - хорошая оптимизация производительности, а также возможность дополнительной загрузки этих модулей.

Источник: https://github.com/Microsoft/TypeScript/issues/4717

я присвоил импортируемого значение фиктивного массива и, кажется, чтобы исправить это. Работает и выход на консоль. (См. Мою последнюю заметку о том, почему я не мог просто передать ее в массив зависимостей).

EDIT: Лучше решение использовать import "module"; syntax, так что всегда излучается на основе вышеприведенного GitHub, экс: import 'angular-ui-router';

Во-вторых, мой файл WebPack пропускал пустая строка в массиве постановляю:

resolve { extensions: ['', '.ts', '.js'] }

Без этого он не мог вытащить файл для ui-маршрутизатора.

Несколько вещей, которые я заметил при работе над этим: webpack --display-error-details очень полезно. По какой-то причине он искал двойные .js.js расширений внутри node_modules/angular-ui-router/release:

resolve file 
    /Users/mich2264/projects/angular-ts/node_modules/angular-ui-router/release/angular-ui-router.js.ts doesn't exist 
    /Users/mich2264/projects/angular-ts/node_modules/angular-ui-router/release/angular-ui-router.js.js doesn't exist

--traceResolution одинаково полезен для машинописи.

EDIT: Появляется, чтобы быть удивительным-машинопись-погрузчик погрузчик ошибка: https://github.com/s-panferov/awesome-typescript-loader/pull/264

Наконец, я не знаю почему, но когда я импортировать значения по умолчанию из angular-ui-router и я вхожу его или установить точка останова отображается правильно как ui.router, но если я попытаюсь передать ее в массив зависимостей, она станет неопределенной.

@types/angular-ui-router определяет следующий экспорт внутри своего типа файла: export default "ui.router";

источник

2016-11-25 23:14:54

Это необходимо сделать работу:

import * as angular from 'angular'; 
import * as uiRouter from 'angular-ui-router'; 

let myApp = angular.module('myApp', ['ui.router']);

Обратите внимание, что импорт просто импортировать код маршрутизатора и в модуле приложения необходимо вводить 'ui.router' строку.

источник

2016-11-25 21:46:02 yarl

Как я могу получить webpack для поиска угловых модулей?

App

ответ

Смежные вопросы