Jak mogę uzyskać pakiet sieci Web, aby znaleźć moduły kątowe?

Question

Próbuję skonfigurować aplikację bare-bones za pomocą Angular 1 + Maszynopis 2 i Webpacka. Aplikacja działa poprawnie, dopóki nie spróbuję użyć modułu zewnętrznego, np. angular-ui-router.

ona zawsze narzeka, że ​​nie może znaleźć zależność:

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

Demo pokazujący problem: https://github.com/jxc876/angular-ts

podejrzewam, nie jestem poprawnie importowania zależność routingu, próbowałem:

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

Próbowano z angular-route, a także ui-router, ale nie działa. Wypróbowałem ts-loader i awesome-typescript-loader.

aplikacji

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); 
}); 

Konfig

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

W końcu to rozgryzłem.

Pierwszym problemem jest to, że kompilator maszynopisu usuwa instrukcje importowania, które nie są używane.

Kompilator wykrywa, czy każdy moduł jest używany w emitowanym skrypcie JavaScript. Jeśli identyfikator modułu jest używany tylko w adnotacjach typu, a nigdy jako wyrażenie, wówczas nie jest wymagane wywołanie dla tego modułu. Ta utylizacja niewykorzystanych odniesień jest dobrą optymalizacją wydajności, a także pozwala na opcjonalne ładowanie tych modułów.

źródło: https://github.com/Microsoft/TypeScript/issues/4717

I przypisano wartość importowanego do manekina tablicy i wydaje się, aby to naprawić. Rejestrowanie wartości na konsolę również działa. (Zobacz moją ostatnią notatkę o tym, dlaczego nie mogłem po prostu przekazać go do tablicy zależności).

EDIT: Lepszym rozwiązaniem jest użycie import "module"; syntax ponieważ zawsze jest emitowana w oparciu o github powyżej, ex: import 'angular-ui-router';

---

II, mój plik WebPack brakowało pusty ciąg w tablicy resolve:

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

Bez tego nie mógł pobrać pliku dla routera Ui.

Kilka rzeczy, które zauważyłem podczas pracy nad tym: webpack --display-error-details jest bardzo przydatny. Z jakiegoś powodu została ona szuka podwójnych .js.js rozszerzeń wewnątrz 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 jest równie przydatny do maszynopisu.

EDIT: Wydaje się, że ładowarka niesamowite-maszynopis-ładowarka bug: https://github.com/s-panferov/awesome-typescript-loader/pull/264

---

Wreszcie, nie jestem pewien dlaczego, ale kiedy importowanie wartość domyślną z angular-ui-router i zalogować lub ustawić punkt przerwania wyświetla się poprawnie jako ui.router, ale jeśli spróbuję przekazać go do tablicy zależności, staje się niezdefiniowany.

@types/angular-ui-router określa następujące eksport wewnątrz swojego pliku typu: export default "ui.router";

Answer 2

Ten powinien wykonać zadanie:

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

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

Zauważ, że import jest po prostu importowanie kodu routera i moduł aplikacji trzeba wstrzyknąć 'ui.router' ciąg.