I'm currently in the process of setting up a basic application using Angular 1 alongside Typescript 2 and Webpack. Everything runs smoothly until I attempt to incorporate an external module, such as angular-ui-router.
An error consistently arises indicating that the dependency cannot be located:
ERROR in ./src/app.ts Module not found: Error: Cannot resolve module 'angular-ui-router' in ./src/app.ts 3:26-54To see the issue in action, check out this demo: https://github.com/jxc876/angular-ts
My suspicion is that I am not importing the routing dependency correctly. I have attempted the following:
import uiRouter from 'angular-ui-router';import * as uiRouter from 'angular-ui-router'
I've experimented with both angular-route and ui-router, but neither seem to work. Furthermore, I have tried utilizing both ts-loader and awesome-typescript-loader without success.
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"
]
}