###前提・実現したいこと
WEBアプリのリプレイスでAngular4を利用しています。
リプレイス前のjsファイルのライブラリを利用したいため型定義ファイルを作成して利用する予定ですが、うまく実行できずエラーとなっています。
調べながらやってみたものの、そもそもAngularにて型定義を読み込む方法があっているのかもわからないため質問させていただきました。
###発生している問題・エラーメッセージ
VSCode上では型定義を参照できていますが、ng serveを実行するとエラーとなります。
ERROR in /xxxx/TestProject/src/app/test/test.component.ts (2,25): Cannot find module 'MyTypesModule'. ERROR in ./src/app/test/test.component.ts Module not found: Error: Can't resolve 'MyTypesModule' in '/xxxx/TestProject/src/app/test' @ ./src/app/test/test.component.ts 11:0-40 @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts webpack: Failed to compile.
###該当のソースコード
1, ng newでプロジェクトを生成
2, ng g c testにてコンポーネントを作成
3, typingsで生成
typings install file:./testlib/mytypes.d.ts --name "mytypes" --global --save
./typings/globals/mytypes/index.d.ts
TypeScript
1// Generated by typings 2// Source: ../testlib/mytypes.d.ts 3declare namespace MyTypes { 4 export class MyClass { 5 constructor(xxx: string); 6 } 7} 8declare module 'MyTypesModule' { 9 export = MyTypes; 10}
./src/app/test/test.component.ts
TypeScript
1import { Component, OnInit } from '@angular/core'; 2import { MyClass } from 'MyTypesModule'; 3 4@Component({ 5 selector: 'app-test', 6 templateUrl: './test.component.html', 7 styleUrls: ['./test.component.css'] 8}) 9export class TestComponent implements OnInit { 10 11 constructor() { } 12 13 ngOnInit() { 14 const x = new MyClass('test'); 15 } 16}
./tsconfig.json
json
1{ 2 "compileOnSave": false, 3 "compilerOptions": { 4 "outDir": "./dist/out-tsc", 5 "baseUrl": "src", 6 "sourceMap": true, 7 "declaration": false, 8 "moduleResolution": "node", 9 "emitDecoratorMetadata": true, 10 "experimentalDecorators": true, 11 "target": "es5", 12 "typeRoots": [ 13 "node_modules/@types", 14 "./typings" 15 ], 16 "files":[ 17 "./typings/index.d.ts" 18 ], 19 "lib": [ 20 "es2016", 21 "dom" 22 ] 23 } 24}
./typings.json
json
1{ 2 "globalDependencies": { 3 "mytypes": "file:../testlib/mytypes.d.ts" 4 } 5}
###試したこと
1, typingsによる読み込み
結果:上記の通り
2, npm privateによるnode_modulesに配置
結果:上記同様のエラー
###補足情報(言語/FW/ツール等のバージョンなど)
OS: macOS Sierra
エディタ:VSCode
Node: 8.1.2
@angular/cli: 1.2.6
Angular 4.0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/22 02:59 編集
退会済みユーザー
2017/08/22 08:53