Wie kann ich Webpack finden, um eckige Module zu finden?

Question

Ich versuche, eine eckige Anwendung mit Angular 1 + Typescript 2 und Webpack einzurichten. Die App funktioniert gut, bis ich versuche, ein externes Modul zu verwenden, zB: angular-ui-router.

Es beschwert sich immer, dass es nicht um die Abhängigkeit finden:

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

Demo zeigt Problem: https://github.com/jxc876/angular-ts

Ich vermute, ich bin nicht die Routing-Abhängigkeit korrekt zu importieren, versucht:

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

mit angular-route Versuchte und auch ui-router aber weder funktioniert. Versucht ts-loader und 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" 
    ] 
} 

Answer 1

Endlich herausgefunden.

Das erste Problem ist, dass der Typescript-Compiler Importanweisungen entfernt, die nicht verwendet werden.

Der Compiler erkennt, ob jedes Modul im ausgegebenen JavaScript verwendet wird. Wenn eine Modulkennung nur in Typanmerkungen und niemals als Ausdruck verwendet wird, wird für dieses Modul kein erforderlicher Aufruf ausgegeben. Dieses Aussortieren nicht verwendeter Referenzen ist eine gute Leistungsoptimierung und ermöglicht auch das optionale Laden dieser Module.

Quelle: https://github.com/Microsoft/TypeScript/issues/4717

I zugewiesen, um den importierten Wert auf einen Dummy-Array und es scheint, dies zu beheben. Das Protokollieren des Werts für die Konsole funktioniert auch. (Siehe meinen letzten Hinweis, warum ich ihn nicht einfach in das Abhängigkeitsfeld übergeben konnte).

EDIT: Bessere Lösung ist import "module"; syntax zu verwenden, da die immer auf der Grundlage der Github oben emittiert wird, ab: import 'angular-ui-router';

---

Zweitens meine webpack Datei wurde eine leere Zeichenfolge in der Entschlossenheit Array fehlt:

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

Ohne dies konnte es nicht die Datei für ui Router ziehen.

Ein paar Dinge, die ich bei der Arbeit daran bemerkt habe: webpack --display-error-details ist super nützlich. Aus irgendeinem Grund, es war auf der Suche nach doppelten .js.js Erweiterungen innerhalb 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 für Typoskript gleichermaßen nützlich ist.

EDIT: Erscheint ein awesome-Typoskript-loader loader Bug zu sein: https://github.com/s-panferov/awesome-typescript-loader/pull/264

---

Schließlich bin ich nicht sicher, warum, aber wenn ich importieren den Standardwert von angular-ui-router und ich log sie oder setzen Ein Haltepunkt wird korrekt als ui.router angezeigt, aber wenn ich versuche, es in das Abhängigkeitsfeld zu übergeben, wird es undefiniert.

@types/angular-ui-router definiert den folgenden Export in ihrem Dateityp: export default "ui.router";

Answer 2

Dieser sollte die Arbeit machen:

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

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

Hinweis, dass Import importiert nur Router-Code und in Anwendungsmodul benötigen Sie 'ui.router' Zeichenfolge zu injizieren.