Question

这是我遇到的问题：

ERROR in ./src/app/users/user-details/user-details.component.ts
Module not found: Error: Can't resolve '../../model/users' in 'C:\Users\Development\angular2-seed\src\app\users\user-details'
 @ ./src/app/users/user-details/user-details.component.ts 12:14-42
 @ ./src/app/app.module.ts
 @ ./src/main.browser.ts
 @ multi main

我已经使用官方angular2-seed存储库启动了该应用。基本上，我使用simnple Observable来加载数据（app/model/users.model.ts），我手动为这个实体提供了类型定义（app/model/users.d.ts）。

我正在users.d.ts文件中加载users.model.ts，这在VSCode中有效，但在编译时失败，我找不到它的原因。

users/user-details/user-details.component.ts：

import { Component, Input } from '@angular/core';

import { User } from '../../model/users';

@Component({
  selector: 'user-details',
  styleUrls: ['./user-details.component.css'],
  template: `
<span>
  {{user.firstName}} {{user.lastName}},
  <strong>age</strong>: {{user.age}}
</span>`
})
export class UserDetailsComponent {
  @Input() user: User;
}

app/model/users.model.ts：

import { Injectable } from '@angular/core';
import { Http, Headers, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { API_URL } from '../config';
import { User } from './users';

@Injectable()
export class UsersModel {
  constructor(private http: Http) {}

  get(id: number): Observable<User> {
    return this.http.get(`${API_URL}/users/${id}`)
      .map((res) => res.json());
  }
//...
}

注意import { User } from './users';行 - 这是为了加载下一个文件：

app/model/users.d.ts：

export interface User {
  id: number;
  departmentId: number;
  firstName: string;
  lastName: string;
  title: string;
  age: number;
  salary: number;
  email: string;
}

问题是：为什么我收到此Module not found / can't resolve错误？ TypeScript允许定义.d.ts标头文件并使用/// reference <...>或通过ES6导入加载它们。我想它与种子配置有关 - 也许是webpack，也许是tsconfig，甚至可能是别的东西。

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "debug": false
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

webpack.config.js：

var webpack = require('webpack');
var path = require('path');
var webpackMerge = require('webpack-merge');

// Webpack Config
var webpackConfig = {
  entry: {
    'main': './src/main.browser.ts',
  },

  output: {
    publicPath: '',
    path: path.resolve(__dirname, './dist'),
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
      path.resolve(__dirname, './src'),
      {
        // your Angular Async Route paths relative to this root directory
      }
    ),
  ],

  module: {
    loaders: [
      // .ts files for TypeScript
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader',
          'angular2-router-loader'
        ]
      },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

};


// Our Webpack Defaults
var defaultConfig = {
  devtool: 'source-map',

  output: {
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: [ '.ts', '.js' ],
    modules: [ path.resolve(__dirname, 'node_modules') ]
  },

  devServer: {
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
  },

  node: {
    global: true,
    crypto: 'empty',
    __dirname: true,
    __filename: true,
    process: true,
    Buffer: false,
    clearImmediate: false,
    setImmediate: false
  }
};


module.exports = webpackMerge(defaultConfig, webpackConfig);

我唯一能找到的东西，根据：

似乎是相关的，将users.d.ts重命名为users.ts（不破坏TS模块解析）解决了这个问题。我想这是因为users.ts被释放，即使它是空的。但这是一种解决方法而不是任何稳定的解决方案。我需要动态生成与域名相关的.d.ts文件，而不是通过@types/...

加载

angular2导入自定义.d.ts失败

0 个答案: