質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

5721閲覧

Angularでのd.tsファイルの読み込みについて

uma_0001

総合スコア8

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2017/08/21 12:35

編集2022/01/12 10:55

###前提・実現したいこと
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

恐らくですがng initで作られたプロジェクトはsrc/tsconfig.app.jsonというファイルがあり,.angular-cli.jsonでこのtsconfig.app.jsonを指定している箇所があるのでこれにtypings.jsonのパスを足すと動く可能性があります。
また,src/tsconfig.app.jsonが指定されているので、tsconfig.app.jsonに

json

1{ 2 "globalDependencies": { 3 "mytypes": "file:../testlib/mytypes.d.ts" 4 } 5}

指定しても動くと思います。angular-cliの設定ファイルでやることに抵抗があれば,ng ejectでwebpackとpackage.jsonの設定を吐き出せるので、そこからwebpackを使用した通常のフローで開発する事もできます。

投稿2017/08/22 01:02

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uma_0001

2017/08/22 02:59 編集

ご回答ありがとうございます。 typingsのインストールをやめ、tsconfig.app.jsonにいただいた内容を記載してみましたが、 相変わらずエラーとなってしまいます。 Module not found: Error: Can't resolve 'MyTypesModule' のエラーは消えたようです。 ``` ERROR in /xxxx/TestProject/src/app/test/test.component.ts (2,31): Cannot find module 'MyTypesModule'. ``` ./src/tsconfig.app.json ```json { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [] }, "exclude": [ "test.ts", "**/*.spec.ts" ], "globalDependencies": [ "file:../testlib/mytypes.d.ts" ] } ```
退会済みユーザー

退会済みユーザー

2017/08/22 08:53

勘違いしていました。 globalDependenciesはtypingsの設定なのでtsconfigの設定ではないようです。 それを踏まえて回答を書き直しますので少々お待ち下さい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問